<template>
  <div class="big-screen-box" :class="defaultClass">
    <div class="big-screen-header">
      <span class="title-name">开封市人社大数据分析</span>
      <span class="time-box">{{time}}</span>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll"  viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
      <span class="data-time">当期：2018年6月份</span>
    </div>
    <div class="big-screen-container" :style="{height:wrapperHeight+'px'}">
      <div class="big-screen-left" :style="{width:(width-40)*0.6-10+'px'}">
        <div class="big-screen-top" :style="{overflow:'hidden'}">
          <div class="big-screen-l flex-auto" :style="{height:wrapperHeight*0.6-9+'px',width:((width-40)*0.6-10)/2-9+'px',marginBottom:'9px'}">
            <div class="item-title">城镇就业人员实名登记情况</div>
            <div class="bigS-chart-box flex-auto">
              <div class="single-circle bigS-chart-box">
                <div class="employment-num-title">全市实名登记的就业人数<span>325224</span>人</div>
                <div id="employment-num" :style="{height:wrapperHeight*0.6-244+'px',width:'60%',float:'left'}"></div>
                <div class="employment-des" :style="{height:wrapperHeight*0.6-244+'px',width:'39%',float:'right',position:'relative'}">
                  <div class="employment-des-text">
                    <p class="employment-des-text-title">2018年实名登记情况</p>
                    <p class="employment-des-text-item">目标：<span>55800</span>人</p>
                    <p class="employment-des-text-item">实际：<span>40304</span>人</p>
                  </div>
                </div>
              </div>
              <div class="employment-areaCode">
                <div class="areaCode-title auto-flex-row">
                  <span class="areaCode-title-item auto-flex-row-item">统筹区</span>
                  <span class="areaCode-title-item auto-flex-row-item">目标人数</span>
                  <span class="areaCode-title-item auto-flex-row-item">实际人数</span>
                </div>
                <div class="employment-areaCode-box">
                  <div class="employment-areaCode-wrapper">
                    <div v-for="item in employmentNum" class="employment-areaCode-item auto-flex-row">
                      <span class="auto-flex-row-item">{{item.areaName}}</span>
                      <span class="auto-flex-row-item">{{item.targetNum}}</span>
                      <span class="auto-flex-row-item">{{item.realNum}}</span>
                    </div>
                    <div v-for="item in employmentNum" class="employment-areaCode-item auto-flex-row">
                      <span class="auto-flex-row-item">{{item.areaName}}</span>
                      <span class="auto-flex-row-item">{{item.targetNum}}</span>
                      <span class="auto-flex-row-item">{{item.realNum}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="big-screen-r flex-auto" :style="{height:wrapperHeight*0.6-9+'px',width:((width-40)*0.6-10)/2-9+'px',marginBottom:'9px'}">
            <div class="item-title">高校毕业生就业实名登记情况</div>
            <div class="coll-and-uni bigS-chart-box" id="coll-and-uni"></div>
          </div>
        </div>
        <div class="big-screen-bottom" :style="{height:wrapperHeight*0.4-9+'px'}">
          <div class="flex-auto" :style="{height:wrapperHeight*0.4-9+'px',width:((width-40)*0.6-10)/2-9+'px',marginBottom:'9px',float:'left'}">
            <div class="item-title"><span class="title">{{title}}</span></div>
            <div class="bigS-chart-box" id="current-period"></div>
          </div>
          <div class="flex-auto" :style="{height:wrapperHeight*0.4-9+'px',width:((width-40)*0.6-10)/2-9+'px',marginBottom:'9px',float:'right'}">
            <div :class="!chooseOther?'item-title':'item-title-g'" style="background: none"><!--当期参保人数完成率--></div>
            <div class="bigS-chart-box" id="insured-num"></div>
          </div>
        </div>
      </div>
      <div class="big-screen-right flex-auto" :style="{width:(width-40)*0.4-10+'px',height:wrapperHeight+'px'}">
        <div class="item-title">当期医疗费用监控</div>
        <div class="bigS-chart-box index-right">
          <div class="right-top">
            <ul class="right-top-first">
              <li>
                <div><img src="../../assets/img/big-screen/yiliao.svg" alt=""></div>
                <div>
                  <p class="right-text">全市医疗费用</p>
                  <p class="right-number"><span>7946.77</span>万元</p>
                </div>
              </li>
              <li>
                <div><img src="../../assets/img/big-screen/jiuzheng.svg" alt=""></div>
                <div>
                  <p class="right-text">全市就诊人数</p>
                  <p class="right-number"><span>57682</span>人次</p>
                </div>
              </li>
            </ul>
            <img class="line" src="../../assets/img/big-screen/line.png" alt="">
            <ul class="auto-flex-row right-top-second">
              <li  class="auto-flex-row-item">
                <p>住院<span>5894.79 万元</span></p>
                <p>5968人次</p>
              </li>
              <li  class="auto-flex-row-item">
                <p>门诊<span>545.35 万元</span></p>
                <p>39013人次</p>
              </li>
              <li  class="auto-flex-row-item">
                <p>门慢<span>514.41 万元</span></p>
                <p>12701人次</p>
              </li>
            </ul>
            <img class="line" src="../../assets/img/big-screen/line.png" alt="">
          </div>
          <div class="right-middle">
            <div>
              <index-map :isChange="isChange"></index-map>
              <index-three-pie :isChange="isChange"></index-three-pie>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {quitFullScreen,svgPath} from '../../assets/js/utils';
  import indexMap from "./indexMap";
  import indexThreePie from "./indexThreePie";
  export default {
    name: "big-screen",
    props: ['isChange','fullScreen','isCollapse','pageChange'],
    data(){
      return {
        svgPath,
        title:"当期征缴收入完成率",
        height:800,
        wrapperHeight:700,
        width:1000,
        defaultClass:'header-padding',
        time:'',
        chooseOther:true,
        employmentNum:[],
        radarData: [79.63,43.12,86.45,84.98,82.58],
        barData:[79.63,43.12,86.45,84.98,82.58],
        newArr: [{real:6691.38,target:8402.58},{real:9814.8,target:22760.37},{real:633.82,target:767.55},{real:418.68,target:492.66},{real:606.82,target:701.91}],
      }
    },
    components:{
      indexMap,
      indexThreePie
    },
    mounted(){
      this.styleInit();
      this.dataInit();
      this.chartInit();
    },
    watch:{
      fullScreen(val){
        setTimeout(()=>{
          this.height = document.querySelector('.big-screen-box').clientHeight;
          this.width = document.querySelector('.big-screen-box').clientWidth;
          if(val){
            this.defaultClass = 'header-padding';
            this.wrapperHeight = this.height-150;
          }else{
            this.defaultClass = '';
            this.wrapperHeight = this.height-80;
          }
          setTimeout(()=>{
            this.chartResize();
          },100)
        },400)
      },
      isChange(){
        setTimeout(()=>{
          this.height = document.querySelector('.big-screen-box').clientHeight;
          this.width = document.querySelector('.big-screen-box').clientWidth;
          setTimeout(()=>{
            this.chartResize();
          },100)
        },400)
      },
      chooseOther(val){

        if(val){
          this.title="当期征缴收入完成率";
          this.radarData = [79.63,43.12,86.45,84.98,82.58]
          this.barData = [79.63,43.12,86.45,84.98,82.58];
          this.newArr = [{real:6691.38,target:8402.58},{real:9814.8,target:22760.37},{real:633.82,target:767.55},{real:418.68,target:492.66},{real:606.82,target:701.91}];
        }else{
          this.title="当期参保人数完成率";
          this.radarData = [108.38,97.64,208.33,182.42,196.59];
          this.barData = [108.38,97.64,208.33,182.42,196.59];
          this.newArr = [{real:598242,target:551999},{real:402285,target:411998},{real:456090,target:232000},{real:496196,target:272001},{real:486354,target:233451}];
        }
        this.currentPeriod.clear();
        this.drawCurrentPeriod();
        this.insuredNumChart.clear();
        this.drawInsuredNumChart();
      }
    },
    methods:{
      styleInit(){
        setTimeout(()=>{
          this.height = document.querySelector('.big-screen-box').clientHeight;
          this.wrapperHeight = this.height-150;
          this.width = document.querySelector('.big-screen-box').clientWidth;
        },10)
        this.getTime();
        setInterval(()=>{
          this.chooseOther = !this.chooseOther;
        },5000)
      },
      dataInit(){
        this.employmentNum = [
          {
          areaName:'市本区',
          targetNum:800,
          realNum:3159
        },{
          areaName:'龙亭区',
          targetNum:5500,
          realNum:3659
        },{
          areaName:'顺河区',
          targetNum:7000	,
          realNum:4567
        },{
          areaName:'鼓楼区',
          targetNum:6000	,
          realNum:4087
        },{
          areaName:'禹王台区',
          targetNum:6000	,
          realNum:3464
        },{
          areaName:'新区',
          targetNum:7500	,
          realNum:6149
        },{
          areaName:'杞县',
          targetNum:6500	,
          realNum:4948
        },{
          areaName:'通许县',
          targetNum:4500	,
          realNum:2757
        },{
          areaName:'尉氏县',
          targetNum:6500	,
          realNum:4000
        },{
          areaName:'祥符区',
          targetNum:5500	,
          realNum:3514
        },]
       this.employmentNum.sort((a,b)=>{return a.realNum<b.realNum})
      },
      chartInit(){
        setTimeout(()=>{
          //城镇就业人员实际登记情况
          this.myEmploymentNumChart = this.$echarts.init(document.getElementById('employment-num'));
          this.drawEmploymentNum();
          //高校毕业生就业实名登记情况
          this.collAndUniChart = this.$echarts.init(document.getElementById('coll-and-uni'));
          this.drawCollAndUni();
          //当期征缴率
          this.currentPeriod = this.$echarts.init(document.getElementById('current-period'));
          this.drawCurrentPeriod();
          //当期参保人数
          this.insuredNumChart = this.$echarts.init(document.getElementById('insured-num'));
          this.drawInsuredNumChart();
        },300)
      },
      chartResize(){
        this.myEmploymentNumChart.resize();
        this.collAndUniChart.resize();
        this.currentPeriod.resize();
        this.insuredNumChart.resize();
      },
      closeAll(){quitFullScreen()},
      getTime(){
        setInterval(()=>{
          let myDate = new Date();
          let year = myDate.getFullYear();
          let month = myDate.getMonth()+1<10?`0${myDate.getMonth()+1}`:myDate.getMonth()+1;
          let date = myDate.getDate()<10?`0${myDate.getDate()}`:myDate.getDate();
          let hour = myDate.getHours()<10?`0${myDate.getHours()}`:myDate.getHours();
          let minute = myDate.getMinutes()<10?`0${myDate.getMinutes()}`:myDate.getMinutes();
          this.time = `${year}-${month}-${date} ${hour}:${minute}`;
        },1000)
      },
      //城镇就业人员实际登记情况
      drawEmploymentNum(){
        this.myEmploymentNumChart.setOption( {
          series: [
            {
              type:'pie',
              hoverAnimation:false,
              // animation:false,
              center:['50%','50%'],
              radius: ['60%', '85%'],
              avoidLabelOverlap: false,
              itemStyle:{
                color:function(params){
                  let i = params.dataIndex;
                  let colorList = ['#f0829d','#0a1d53'];
                  return colorList[i];
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                show: true,
                position: 'center',
                rich: {
                  textAlign: 'center',
                  a: {
                    color: '#f0829d',
                    fontSize: 14,
                    lineHeight: 24,
                    textAlign: 'right',
                    fontWeight: 'bolder ',
                  },
                  b: {
                    color: '#6bd5f4',
                    fontSize: 12,
                  }
                },
                formatter: function (params) {
                  return `{a|72.23%}\n{b|完成率}`;
                }
              },
              data:[
                {value:72.23},
                {value:27.77}
              ]
            },{
              type:'pie',
              hoverAnimation:false,
              // animation:false,
              center:['50%','50%'],
              radius: ['54%', '56%'],
              avoidLabelOverlap: false,
              itemStyle:{
                color:'#6BD5F4',
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                show: true,
                position: 'center',
                rich: {
                  textAlign: 'center',
                  a: {
                    color: '#f0829d',
                    fontSize: 14,
                    lineHeight: 24,
                    textAlign: 'right',
                    fontWeight: 'bolder ',
                  },
                  b: {
                    color: '#fff',
                    fontSize: 12,
                  }
                },
                formatter: function (params) {
                  return "";
                }
              },
              data:[
                {value:100},
              ]
            },{
              type:'pie',
              // animation:false,
              hoverAnimation:false,
              center:['50%','50%'],
              radius: ['89%', '90%'],
              avoidLabelOverlap: false,
              itemStyle:{
                color:'#0494e2',
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                show: true,
                position: 'center',
                rich: {
                  textAlign: 'center',
                  a: {
                    color: '#f0829d',
                    fontSize: 14,
                    lineHeight: 24,
                    textAlign: 'right',
                    fontWeight: 'bolder ',
                  },
                  b: {
                    color: '#fff',
                    fontSize: 12,
                  }
                },
                formatter: function (params) {
                  return "";
                }
              },
              data:[
                {value:100},
              ]
            }
          ]
        })
      },
      //高校毕业生就业实名登记情况
      drawCollAndUni(){
        let that = this;
        this.collAndUniChart.setOption({
          grid: {
            left: 40,
            right: 30,
            bottom: 50,
            top:40,
          },
          xAxis: {
            type : 'category',
            data : ['中等专科','大学专科','大学本科','硕士研究生','博士研究生','全部'],
            axisLine:{ //x轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{ //x轴的刻度短竖线是否显示
              show:false
            },
            axisLabel : {
              show: true ,// 显示x轴坐标数值
              interval:0,
              textStyle: {
                color: '#fff',
                lineHeight:18,
              },
              formatter:function(val){
                let length = val.length;
                let txt1 = val.slice(0,2);
                let txt2 = val.slice(2,length)
                return `{a|${txt1}}\n${txt2}`
              },
              rich:{
                a:{
                  lineHeight:16
                }
              }
            },
          },
          yAxis: {
            name:'单位：人',
            nameTextStyle:{
              color:'#fff',
            },
            position:'left',
            axisLine:{
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            splitLine: {
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '',
            },
          },
          series: [
            {
              type: 'bar',
              stack:  '总量',
              itemStyle: {
                normal: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                }
              },
              data: [0, 27, 1877, 4568, 5262, 0]
            },
            {
              name: '生活费',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color:'#fff',
                }
              },
              itemStyle: {
                normal: {
                  //颜色渐变
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#39aedf'
                  }, {
                    offset: 1,
                    color: '#3f29d1'
                  }])
                }
              },
              barWidth:'50%',
              barMaxWidth:30,
              barMinWidth:30,
              data:[27, 1850, 2619, 694, 45, 5389]
            }
          ]
        })
      },
      //当期征缴率
      drawCurrentPeriod(){
        let that =this;
        let max=100;
        let data = [];
        that.radarData.map(item=>{
          if(item<=100){
            data.push(item)
          }else{
            data.push(100)
          }
        })
        this.currentPeriod.setOption( {
          radar: {
            center: ['50%', '50%'],
            radius: '60%',
            name: {
              textStyle: {
                color: '#fff',
              }
            },
            splitNumber: 3,
            splitLine: {
              lineStyle: {
                color:'#39aedf'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#39aedf'
              }
            },
            splitArea: {
              areaStyle: {
                color:'none',
              }
            },
            indicator: [
              { name: '医保（'+that.radarData[0]+'%）', max: max},
              { name: '养老（'+that.radarData[1]+'%）', max: max},
              { name: '生育（'+that.radarData[2]+'%）', max: max},
              { name: '工伤（'+that.radarData[3]+'%）', max: max},
              { name: '失业（'+that.radarData[4]+'%）', max: max},
            ]
          },
          series: [{
            type: 'radar',
            symbol: 'none',
            lineStyle: {
              normal: {
                width: 1,
                opacity: 0.5
              }
            },
            data : [
              {
                itemStyle: {
                  normal: {
                    color: '#1f32fb'
                  }
                },
                areaStyle: {
                  normal: {
                    opacity: 0.4
                  }
                },
                value : data,
              },
            ]
          }]
        })
      },
      //当期参保人数
      drawInsuredNumChart(){
        let that = this;
        let x = ['职工医保','职工养老','失业保险','工伤保险','生育保险'];
        let dataShadow = [];
        let data = []
        this.newArr.map(item=>{
          data.push(item.real)
        })
        let max = Math.max(...data)
        for (let i = 0; i < x.length; i++) {
          dataShadow.push(max);
        }
        this.insuredNumChart.setOption({
          grid:{
            top:5,
            right:60,
            bottom:0,
            left:80,
          },
          xAxis:{
            show:false
          },
          yAxis:{
            data:x,
            inverse:true,
            axisLine: {
              show: false, // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true ,// 显示x轴坐标数值
              textStyle: {
                color: '#fff'
              }
            }
          },
          series:[ { // For shadow
            type: 'bar',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
                barBorderRadius:10
              },
            },
            barGap:'-100%',
            barCategoryGap:'40%',
            data: dataShadow,
            barWidth:'30%',
            barMaxWidth:20,
            label:{
              show:true,
              position:'top',
              formatter:function(params){
                let i = params.dataIndex;
                let str=that.chooseOther?"万元":"人";
                return `当期：${that.newArr[i].real}${str}/目标：${that.newArr[i].target}${str}`
              },
              color:'#b6eeff'
            },
            animation: false
          },{
            type:'bar',
            data:data,
            // stack:'profession',
            color:'#3281fd',
            barWidth:'30%',
            barMaxWidth:20,
            itemStyle:{
              barBorderRadius:5,
              //颜色渐变
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#1f32fb'
              }, {
                offset: 1,
                color: '#0e71c3'
              }])
            },
            animation: false,
          }]
        })
      },
    }
  };
</script>

<style scoped>
  .big-screen-box{
    box-sizing:border-box;
    overflow:hidden;
    height:100%;
    background:url('../../assets/img/big-screen/big-screen-bk.png') no-repeat center center;
  }
  .time-box{
    float:left;
    padding-left:20px;
    line-height:24px;
    color:#fff;
    font-size:14px;
  }
  .data-time{
    float:right;
    margin-right:50px;
    line-height:24px;
    color:#fff;
    font-size:14px;
  }
  .header-padding{
    padding-top:70px;
  }
  .big-screen-header{
    height:40px;
    background:url('../../assets/img/big-screen/big-screen-title.png') no-repeat center center;
    background-size:100% 100%;
    text-align:center;
    font-size:20px;
    position:relative;
  }
  .title-name{
    position:absolute;
    top:0;
    height:40px;
    line-height:48px;
    width:300px;
    text-align:center;
    left:50%;
    margin-left:-150px;
    font-size:22px;
    background: linear-gradient(to bottom, #fff, #00a1ff);
    -webkit-background-clip: text;
    color: transparent;
  }
  .big-screen-container{
    box-sizing:border-box;
    padding:20px;
  }
  .big-screen-left,.big-screen-l{
    float:left;
    margin-right:9px;
    box-sizing:border-box;
  }
  .big-screen-right,.big-screen-r{
    float:right;
    margin-left:9px;
    box-sizing:border-box;
  }
  .big-screen-right{
    background:url('../../assets/img/big-screen/big-screen-right.png') no-repeat center;
    background-size:100% 100%;
  }
  .big-screen-r{
    background:url('../../assets/img/big-screen/big-screen-r.png') no-repeat center;
    background-size:100% 100%;
  }
  .big-screen-l{
    background:url('../../assets/img/big-screen/big-screen-l.png') no-repeat center;
    background-size:100% 100%;
  }
  .big-screen-top{
    box-sizing:border-box;
  }
  .big-screen-bottom{
    margin-top:9px;
    box-sizing:border-box;
    background:url('../../assets/img/big-screen/big-screen-bottom.png') no-repeat center;
    background-size:100% 100%;
  }
  .item-title{
    height:38px;
    line-height:38px;
    margin:15px;
    margin-bottom:0;
    background:url('../../assets/img/big-screen/title-h.png') no-repeat center center;
    background-size:100% 100%;
    box-sizing:border-box;
    padding-left:15px;
    font-size:14px;
    color:#fff;
  }

  .item-title-g{
    height:38px;
    line-height:38px;
    margin:15px;
    margin-bottom:0;
    background:url('../../assets/img/big-screen/title-g.png') no-repeat center center;
    background-size:100% 100%;
    box-sizing:border-box;
    padding-left:15px;
    font-size:14px;
    color:#7b7c8d;
  }
  .flex-auto{
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
  }
  .bigS-chart-box{
    flex:auto;
  }
  .employment-areaCode{
    height:156px;
    width:100%;
  }
  .areaCode-title{
    box-sizing:border-box;
    padding-top:10px;
    padding-bottom:6px;
    font-size:14px;
    color:#0a82d8;
    background:url('../../assets/img/big-screen/line.png') no-repeat top center;
    background-size:90% auto;
  }
  .areaCode-title-item{
    text-align:center;
  }
  .auto-flex-row{
    display: -webkit-flex;
    display: flex;
  }
  .auto-flex-row-item{
    flex:1;
  }
  .employment-areaCode-box{
    height:120px;
    overflow:hidden;
    position:relative;
  }
  .title{
    -webkit-animation: titleOpacity 10s infinite;
  }
  @keyframes titleOpacity {
    0% {
      opacity:1;
    }
    40% {
      opacity:1;
    }
    50% {
      opacity:0.1;
    }
    51% {
       opacity:1;
     }
    90% {
      opacity:1;
    }
    100%{
      opacity:0.1;
    }
  }

  @keyframes scroll {
    0% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
    }
    10% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
    }
    40% {
      -webkit-transform: translateY(-120px);
      transform: translateY(-120px);
    }
    60% {
      -webkit-transform: translateY(-120px);
      transform: translateY(-120px);
    }
    90% {
      -webkit-transform: translateY(-240px);
      transform: translateY(-240px);
    }
    100% {
      -webkit-transform: translateY(-240px);
      transform: translateY(-240px);
    }
  }
  .employment-areaCode-wrapper{
    height:480px;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    -webkit-animation: scroll 7.5s infinite;

  }
  .employment-areaCode-item{
    font-size:12px;
    color:#6cd5f4;
    line-height:24px;
    text-align:center;
  }
  .employment-num-title{
    clear:both;
    height:24px;
    line-height:30px;
    text-align:center;
    color:#6bd5f4;
    font-size:14px;
  }
  .employment-num-title span{
    margin:0 10px;
    font-size:20px;
    color:#cbc3ff;
  }
  .employment-des-text{
    position:absolute;
    height:96px;
    top:50%;
    left:0;
    margin-top:-48px;
    font-size:14px;
    width:160px;
    text-align:center;
    /*right:15px;*/
  }
  .employment-des-text-title{
    line-height:26px;
    margin:10px 0;
    background:linear-gradient(0deg,rgba(13,34,97,0) 0%, rgba(13,34,97,1)  100%);
    color:#6cd5f4;
  }
  .employment-des-text-item{
    color:#b6eeff;
    line-height:24px;
  }
  .employment-des-text-item span{
    font-size:20px;
    color:#cbc3ff;
  }


  /*右边*/
  .index-right{
    display: flex;
    margin:0 15px;
    flex-direction: column;
    color:#b6eeff;
  }
  .right-top-first{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:20px 0;
  }
  .right-top-first li{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right-top-first li div:first-child{
    margin-right: 20px;
  }
  .right-top-first li img{
    width:35px;
  }
  .right-text{
    font-size: 16px;
    font-weight: bold;
    margin:0;
  }
  .right-number{
    padding-top:10px;
    color:#cbc3ff;
  }
  .right-number span{
    font-size: 20px;
  }
  .index-right .line{
    display: block;
    margin:0 auto;
    width:95%;
  }
  .index-right .right-middle{
    flex:1 1 auto;
    position: relative;
  }
  .index-right .right-middle>div{
    position: absolute;
    height: 100%;
    width:100%;
  }

  .right-top-second{
    padding:15px 0;
    width:95%;
  }
  .right-top-second li{
    text-align: center;
    font-size: 16px;
  }
  .right-top-second li p{
    text-align: right;
  }
  .right-top-second li p span{
    color:#cbc3f3;
    margin-left:15px;
  }
  .right-top-second li p:last-child{
    color:#cbc3f3;
    padding-top:10px;
  }
</style>
<style>

</style>
